<template>
    <div class="title-bar">
        <div class="left-menu">
            <!-- 品牌标识区 -->
            <img alt="网易云音乐 logo" src="@/assets/img/cloud-logo.png" class="logo" />
            <span class="title">网易云音乐</span>

            <!-- 翻页控制区 -->
            <div class="left-page">
                <Icon name="xiangzuo" />
            </div>
            <div class="right-page">
                <Icon name="xiangyou1" />
            </div>

            <!-- 搜索框 -->
            <div class="search-input">
                <Icon name="sousuo" />
                <input placeholder="周杰伦" type="text" />
            </div>

            <!-- 听歌识曲 -->
            <div class="listen-music">
                <Icon name="maikefeng" />
            </div>
        </div>

        <div class="right-menu">
            <!-- 用户信息区 -->
            <div class="head-sculpture">
                <Icon name="touxiang" />
            </div>
            <div class="login-user">
                <span>未登录</span>
                <Icon name="xiangxia1" :size="14" />
            </div>

            <!-- 功能图标区 -->
            <Icon name="pifu" :size="20" class="func-icon" />
            <Icon name="shezhi" :size="20" class="func-icon" />
            <Icon name="youxiang" :size="20" class="func-icon" />

            <!-- 分割线 -->
            <div class="split-line"></div>

            <!-- 窗口控制区 -->
            <Icon
                name="suoxiao1"
                :size="20"
                title="最小化"
                @click="minimizeClick"
                class="window-icon"
            />
            <Icon
                v-if="isMaximize"
                name="fangda1"
                :size="20"
                title="最大化"
                @click="maximizeClick"
                class="window-icon"
            />
            <Icon
                v-else
                name="suoxiao"
                :size="20"
                title="向下还原"
                @click="maximizeClick"
                class="window-icon"
            />
            <Icon
                name="guanbi1"
                :size="20"
                title="关闭"
                @click="closeAppClick"
                class="window-icon"
            />
        </div>
    </div>
</template>

<script setup lang="ts" name="PagesSystemMenuTopBar">

const isMaximize = ref<boolean>(true);
interface Window {
    electronAPI: {
        minimize: () => void;
        maximize: () => void;
        shutdown: () => void;
    };
}

const minimizeClick = () => window?.electronAPI.minimize();
const maximizeClick = () => {
    
    isMaximize.value = !isMaximize.value;
    if(isMaximize.value) {
        // 如果是最大化状态，点击后恢复到原始大小
        window?.electronAPI.restore();

    }else{
         window?.electronAPI.maximize();
    }
   
};
const closeAppClick = () => window?.electronAPI.shutdown();
</script>

<style scoped lang="scss">
// 基础样式（全局通用）
.title-bar {
    width: 100%;
    height: 60px;
    background-color: #ec4141;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    // padding: 0 16px; // 全局内边距，避免内容贴边
    box-sizing: border-box;

    .iconfont {
        font-size: 20px;
        color: #eeeed1;
        cursor: pointer;
        transition: color 0.2s;

        &:hover {
            color: #fff; //  hover增强交互
        }
    }
}

// 左侧菜单布局
.left-menu {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0; // 避免被压缩

    .logo {
        width: 32px;
        height: 32px;
    }

    .title {
        font-size: 18px;
        color: #fff;
        margin-left: 6px;
        font-weight: 500;
    }

    // 翻页按钮
    .left-page,
    .right-page {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: rgba(105, 105, 105, 0.2);
        text-align: center;
        line-height: 22px;
        margin-left: 60px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: rgba(105, 105, 105, 0.3);
        }

        .icon-xiangzuo,
        .icon-xiangyou1 {
            font-size: 14px;
        }
    }

    .right-page {
        margin-left: 10px; // 与左侧翻页按钮间距
    }

    // 搜索框
    .search-input {
        width: 200px;
        height: 32px;
        border-radius: 16px;
        background-color: rgba(105, 105, 105, 0.2);
        display: flex;
        align-items: center;
        margin-left: 10px;
        transition: background-color 0.2s;

        &:hover {
            background-color: rgba(105, 105, 105, 0.3);
        }

        .icon-sousuo {
            font-size: 14px;
            margin-left: 10px;
            margin-right: 6px;
        }

        input {
            width: 146px;
            background-color: transparent;
            color: #fff;
            border: none;
            padding: 0;
            font-size: 13px;
            letter-spacing: 1px;

            &:focus-visible {
                outline: none;
            }

            &::placeholder {
                color: #eeeed1;
                font-size: 13px;
                letter-spacing: 1px;
            }
        }
    }

    // 听歌识曲
    .listen-music {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(105, 105, 105, 0.2);
        text-align: center;
        line-height: 32px;
        margin-left: 10px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: rgba(105, 105, 105, 0.3);
        }
    }
}

// 右侧菜单布局
.right-menu {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;

    // 头像
    .head-sculpture {
        width: 30px;
        height: 30px;
        background-color: #e0e0e0;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
        cursor: pointer;

        .icon-touxiang {
            margin: 0;
            font-size: 24px;
            color: #fff;
        }
    }

    // 登录状态
    .login-user {
        height: 20px;
        font-size: 12px;
        display: flex;
        align-items: center;
        color: #eeeed1;
        margin-right: 20px;
        cursor: pointer;

        span {
            margin-right: 4px;
        }

        .icon-xiangxia1 {
            font-size: 12px;
            margin: 0;
        }
    }

    // 功能图标
    .func-icon {
        margin-right: 20px;
    }

    // 分割线
    .split-line {
        width: 1px;
        height: 16px;
        background-color: #eeeed1;
        margin-right: 20px;
    }

    // 窗口控制图标
    .window-icon {
        margin-right: 12px;

        &:last-child {
            margin-right: 0; // 最后一个图标无右侧间距
        }

        &:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2); // 窗口按钮hover效果
            border-radius: 4px;
        }
    }
}

// 平板适配（768px - 1024px）
@media (max-width: 1024px) {
    .left-menu {
        .left-page,
        .right-page {
            margin-left: 30px; // 缩小翻页按钮左侧间距
        }

        .search-input {
            width: 160px; // 缩短搜索框

            input {
                width: 106px; // 缩短输入框
            }
        }
    }

    .right-menu {
        .func-icon {
            margin-right: 15px; // 缩小功能图标间距
        }

        .login-user {
            margin-right: 15px;
        }
    }
}

// 手机适配（≤768px）
@media (max-width: 768px) {
    .title-bar {
        height: 50px; // 降低高度
        padding: 0 12px;
    }

    .left-menu {
        // 保留核心元素，隐藏次要元素
        .title {
            display: none; // 隐藏文字标题
        }

        .left-page,
        .right-page {
            display: none; // 隐藏翻页按钮
        }

        .search-input {
            width: 140px; // 进一步缩短搜索框
            margin-left: 15px; // 调整与logo间距

            input {
                width: 90px;
                font-size: 12px;
            }
        }

        .listen-music {
            width: 28px;
            height: 28px; // 缩小听歌识曲按钮
        }

        .logo {
            width: 28px;
            height: 28px; // 缩小logo
        }
    }

    .right-menu {
        // 隐藏非核心元素
        .login-user span {
            display: none; // 隐藏"未登录"文字
        }

        .func-icon {
            display: none; // 隐藏皮肤、设置、邮件图标
        }

        .split-line {
            margin-right: 12px;
        }

        .head-sculpture {
            margin-right: 5px;
        }

        // 窗口控制图标缩小
        .window-icon {
            font-size: 16px !important;
            margin-right: 8px;
        }
    }
}

// 小屏手机适配（≤375px）
@media (max-width: 375px) {
    .left-menu {
        .search-input {
            width: 100px; // 超小屏进一步缩短搜索框

            input {
                width: 60px;
            }
        }

        .listen-music {
            display: none; // 超小屏隐藏听歌识曲
        }
    }

    .right-menu {
        .head-sculpture {
            width: 26px;
            height: 26px; // 缩小头像

            .icon-touxiang {
                font-size: 20px !important;
            }
        }
    }
}
</style>
